<template>
  <!--头部-->

<!--  头部背景图-->
  <el-header v-bind:style='{"background-image":"url("+ha[0].imgUrl+")"}'>

    <el-row class="top-row" >
<!--      大成编客图片-->
      <div>
        <el-col class="top-img" v-bind:style='{"background-image":"url("+ha[0].imgUrll+")"}'>
        </el-col>
      </div>

      <div class="top-2">
      <el-col >
        <el-row class="top-2-2">
          <el-col class="search-img" :span="3"></el-col>
          <el-col :span="13">
            <input type="text"  :value="ha[0].keyWord" style="background-color:rgb(102,102,102);line-height:28px;border: none;color: rgb(190,190,190);font-size: 14px">
<!--            <el-input :value="keyWord"></el-input>-->
          </el-col>
          <el-col :span="4">
            <div class="my-menu-down">
              <el-dropdown>
                    <span class="el-dropdown-link">{{ha[0].all}}
                      <i class=" el-icon--right el-icon-caret-bottom" ></i>
                    </span>
                <el-dropdown-menu slot="dropdown" class="my-menu">
                  <el-dropdown-item class="menu-title" v-for="it in option" v-text="it">知网书</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <el-col :span="4" class="search-kung">
                <span>
                  {{ha[0].search}}
                </span>
          </el-col>
        </el-row>
      </el-col>
      </div>

      <el-col class="top-nav">
        <el-menu mode="horizontal" class="top-nav-2">
          <el-menu-item index="1" background-color="#545c64" class="my-menu-it" >{{ha[0].login}}</el-menu-item>
          <span>|</span>
          <!--              <el-menu-item index="1" disabled></el-menu-item>-->
          <el-menu-item index="1">{{ha[0].signIn}}</el-menu-item>

          <el-submenu index="2" class="tow-item">
            <template slot="title">{{ha[0].person}}</template>
            <el-menu-item index="2-1" class="tow-item" v-for="i in nav" v-text="i"></el-menu-item>
          </el-submenu>

          <el-menu-item index="3" >{{ha[0].shopping}}</el-menu-item>

          <el-menu-item index="3" >{{ha[0].recharge}}</el-menu-item>

          <el-menu-item index="3" >{{ha[0].help}}</el-menu-item>
          <!--              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
        </el-menu>
      </el-col>

    </el-row>
  </el-header>



</template>

<script>
  export default {
    name: "Top",
    data(){
      return{
        ha :[
          {
            imgUrl:'https://bianke.cnki.net/resources/images/header-and-footer/hf3-headerBg.gif',
            imgUrll:'https://bianke.cnki.net/resources/images/header-and-footer/hf12-logo3.jpg',
            keyWord:'请输入关键词',
            all: '全部',
            search: '搜索',
            login: '登陆',
            signIn: '注册',
            person: '个人中心',
            shopping: '购物车',
            help: '帮助',
            recharge: '充值'
          }
        ],
        option: [
          '知网书', '文章','编客','专题','讲座'
        ],
        nav: [
          '我的书架','个人资料','--------','我关注的','账单管理'
        ]
      }
    }
  }
</script>

<style scoped>
  .top-row {
    background-color: black;
    height: 60px;
  }
  .top-img {
    background-image: url("../assets/hf12-logo3.jpg");
    background-repeat: no-repeat;
    height: 25px;
    /*position: absolute;*/
    margin-left: 350px;
    width: 177px;
    margin-top: 16px;
  }
  .top-2 {
    position: absolute;
    padding-left: 600px;
    margin-top: 15px;
  }
  .top-2-2 {
    /*position: absolute;*/
    background-color: rgb(102,102,102);
    width: 400px;
    border-radius: 15px;
  }
  .search-img {
    background-image: url("../assets/hf5-searchIcon.gif");
    height: 30px;
    background-repeat: no-repeat;
   /* position: relative;*/
  }
  .my-menu {
    background-color: rgb(102,102,102);
    color: rgb(241,235,222);
  }
  .search-kung {
    background-color: rgb(198, 167, 85);
    height: 30px;
    border-radius: 0px 15px 15px  0px;
    color: white;

    font-size: 14px;
  }
  .search-kung:hover {
    background-color: rgb(215, 192, 114);
  }
  .search-kung span {
    margin-left: 12px;
    margin-top: 5px;
    display: block;
  }
  .menu-title {
    color: rgb(241,235,222);
  }
  .menu-title:hover {
    color: black;
    background-color: rgb(241,235,222);
  }
  .el-dropdown-link {
    cursor: pointer;
    color: rgb(153,153,153);
  }
  .my-menu-down {
    margin-top: 4px;
  }
  .top-nav {
    position: absolute;
    width: 700px;
    margin-left: 1100px;
  }
  .top-nav-2 {
    background-color: black;
    /*color: rgb(150, 162, 167);*/

  }
  .mine {
    color: rgb(150, 162, 167);
  }
  .el-menu-item {
    color: rgb(150, 162, 167);
    /*padding-left: 0px;*/

  }
  .my-menu-it:hover {
    color: white;
  }

  .el-header {
    /*background-image: url("../assets/hf3-headerBg.gif");*/
    background-repeat: repeat;
    height: 54px;
    position: relative;
  }
</style>
